<template>
  <div class="index-container">
    <div class="title">七联一动养老管理系统</div>
    <div class="menu">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <div class="imgBox">
            <el-row :gutter="40">
              <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div data-path="/medicalCareIndex" @click="handleRouter">
                  <div class="vCenter">
                    <img src="../../assets/images/nav-1.png" alt="" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div data-path="/institutionalIndex" @click="handleRouter" >
                  <div class="vCenter">
                    <img src="../../assets/images/nav-2.png" alt="" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div data-path="/healthData" @click="handleRouter">
                  <div class="vCenter">
                    <img src="../../assets/images/nav-3.png" alt="" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div data-path="/badNum" @click="handleRouter">
                  <div class="vCenter">
                    <img src="../../assets/images/nav-4.png" alt="" />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="imgBox">
            <el-row :gutter="40">
              <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div data-path="/entertainment" @click="handleRouter">
                  <div class="vCenter">
                    <img src="../../assets/images/nav-5.png" alt="" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div data-path="/trainingCourse" @click="handleRouter">
                  <div class="vCenter">
                    <img src="../../assets/images/nav-6.png" alt="" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div data-path="/helpManager" @click="handleRouter">
                  <div class="vCenter">
                    <img src="../../assets/images/nav-7.png" alt="" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                <div data-path="/doorService" @click="handleRouter">
                  <div class="vCenter">
                    <img src="../../assets/images/nav-8.png" alt="" />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-button-next" @click="handleNext"></div>
      <div class="swiper-button-prev" @click="handlePrev"></div>
    </div>
    <div class="logOut" @click="handleOut">
      <div class="mapBtn" @click="handleMap">养老地图</div>
      <div>
        <vab-icon :icon="['fas', 'power-off']" color="#fff"></vab-icon>
        退出登录
      </div>

    </div>
    
    <div class="time">
      {{ currentTime }}
    </div>
    <div class="copyright">河南瑞福祥医养集团</div>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
  import { recordRoute } from "@/config/settings";
  import { mapGetters } from "vuex";
  import { getroleinfo } from "@/api/depart";
  import "swiper/swiper-bundle.css";
  export default {
    name: "CoverIndex",
    components: { Swiper, SwiperSlide },
    directives: {
      swiper: directive,
    },
    data() {
      return {
        currentTime: "",
        swiperOptions: {
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        },
      };
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper;
      },
      ...mapGetters({
        avatar: "user/avatar",
        username: "user/username",
        name: "user/name",
        type: "user/type",
        role_id: 'user/role_id',
        userpermi: "user/userpermi",
        routes: "routes/routes",
      }),
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      setInterval(() => {
        this.timeShow();
      }, 1000);
      if(this.role_id != 0) {
        getroleinfo({id: this.role_id}).then(res => {
          if(res.code == 200) {
            this.$store.dispatch("user/setUserpermi", res.data?.permis.split(",").map(Number))
          } else {
            this.$message({
              message: "权限获取失败，请联系管理员",
                type: "warning",
            })
          }
        })
      } 
    },
    methods: {
      timeShow() {
        let d = new Date(),
          str = "";
        str += d.getFullYear() + "-"; //获取当前年份
        str +=
          (d.getMonth() + 1).toString().length < 2
            ? "0" + (d.getMonth() + 1) + "-"
            : d.getMonth() + 1 + "-"; //获取当前月份（0——11）
        str +=
          d.getDate().toString().length < 2
            ? "0" + d.getDate() + " "
            : d.getDate() + " ";
        str +=
          d.getHours().toString().length < 2
            ? "0" + d.getHours() + ":"
            : d.getHours() + ":";
        str +=
          d.getMinutes().toString().length < 2
            ? "0" + d.getMinutes() + ":"
            : d.getMinutes() + ":";
        str +=
          d.getSeconds().toString().length < 2
            ? "0" + d.getSeconds() + ""
            : d.getSeconds() + "";
        this.currentTime = str;
      },
      nav() {
        this.$router.push({ path: "/home" });
      },
      handleNext() {
        this.swiper.slideNext();
      },
      handlePrev() {
        this.swiper.slidePrev();
      },
      handleOut() {
        this.$baseConfirm(
          "您确定要退出" + this.$baseTitle + "吗?",
          null,
          async () => {
            await this.$store.dispatch("user/logout");
            if (recordRoute) {
              const fullPath = this.$route.fullPath;
              this.$router.push(`/login?redirect=${fullPath}`);
            } else {
              this.$router.push("/login");
            }
          }
        );
      },
      handleMap() {
        this.$router.push("/map");
      },
      handleRouter(e) {
        console.log(this.type);
        this.routes.forEach(item => {
          let path = e.currentTarget.dataset.path;
          if(item.id && item.children.length > 0 && item.path == path) {
            this.$router.push(item.children[0].path);
          } else if(item.id && item.path == path && item.children.length == 0) {
            this.$message({
              message: "您没有权限访问，请联系管理员",
              type: "warning",
            });
          }
        })
        // let path = e.currentTarget.dataset.path;
        // this.$router.push(path);
        // if (this.type == 9) {
        //   this.$router.push(path);
        // } else {
        //   if (
        //     path == "/institutionalIndex" ||
        //     path == "/entertainment" ||
        //     path == "/trainingCourse"
        //   ) {
        //     this.$router.push(path);
        //   } else {
        //     this.$message({
        //       message: "您没有权限访问，请联系管理员",
        //       type: "warning",
        //     });
        //   }
        // }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background: url("../../assets/images/coverIndex.png") no-repeat;
    background-size: 100% 100%;

    .title {
      position: absolute;
      top: 15%;
      left: 0;
      width: 100%;
      font-size: 72px;
      color: #fff;
      text-align: center;
    }

    @media only screen and (max-width: 767px) {
      .title {
        font-size: 18px;
      }
    }

    .menu {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      transform: translateY(-50%);

      .imgBox {
        padding: 0 180px;
        text-align: center;

        a {
          display: inline-block;
          padding: 1%;
          vertical-align: middle;
        }

        .vCenter {
          /* // width: 360px; */
          height: 400px;
          cursor: pointer;

          img {
            width: 100%;
          }
        }

        @media only screen and (max-width: 767px) {
          .vCenter {
            height: 150px;
          }
        }
      }

      .swiper-button-next,
      .swiper-button-prev {
        color: #fff;
      }
    }

    @media only screen and (max-width: 767px) {
      .menu {
        .imgBox {
          padding: 0 10%;
        }
      }
    }

    .logOut {
      width: 250px;
      position: absolute;
      top: 6%;
      right: 5%;
      font-size: 24px;
      color: #fff;
      cursor: pointer;

      .fa-power-off {
        font-size: 24px;
      }
    }

    .mapBtn {
      float: left;
      margin-right: 20px;
      font-size: 24px;
      color: #fff;
      cursor: pointer;

      .fa-power-off {
        font-size: 24px;
      }
    }

    @media only screen and (max-width: 767px) {
      .mapBtn {
        top: 12%;
        right: 5%;
      }
    }

    .time {
      position: absolute;
      top: 6%;
      left: 5%;
      font-size: 48px;
      font-weight: normal;
      color: #fff;
    }

    .copyright {
      position: absolute;
      bottom: 117px;
      left: 0;
      width: 100%;
      font-size: 48px;
      color: #fff;
      text-align: center;
    }

    @media only screen and (max-width: 767px) {
      .time,
      .logOut,
      .mapBtn,
      .copyright {
        font-size: 18px;

        .fa-power-off {
          font-size: 18px;
        }
      }
    }
  }
</style>
